<template>
  <div v-loading="loading" style="width: 100vw;height: 100vh;">
    <el-row>
      <top :title="title" :isSecond="1" />
    </el-row>

    <el-row style="margin-top: 4vh;">
      <el-cascader
        v-model="semester"
        placeholder="学年学期选择"
        :options="semesterOption"
        class="punishment_cascader"
        @change="handleChange"></el-cascader>
    </el-row>
    <el-row>
      <div class="info" v-for="(item, index) in semesterInfo" :key="index">
        <div class="info-first">
          <span>{{ item.time }}</span>
        </div>
        <div class="info-sec">
          <p>
            {{ item.content }}
          </p>
        </div>
        <div class="info-third">
          <span align="left">地点：{{ item.place }}</span>
        </div>
        <div class="info-button">
          <el-button>查看详情</el-button>
        </div>
      </div>
    </el-row>
    <el-row>
      <bottom />
    </el-row>
  </div>
</template>

<script>
import top from '@/components/top'
import bottom from '@/components/bottom'

export default {
  name: 'activity',
  data () {
    return {
      loading: false,
      title: '课外活动',
      semester: 0,
      semesterOption: [],
      semesterInfo: [
        {
          time: '2021/6/1-2021/6/7',
          type: '记过',
          content: '学校学生庆祝六一节活动志愿者',
          place: '西图308'
        }
      ]
    }
  },
  methods: {
    handleChange () {}
  },
  components: {
    top,
    bottom
  }
}
</script>

<style lang="stylus" scoped>

.punishment_cascader
  width: 84vw
.info
  width: 84vw
  height: 30vh
  margin: 3vh auto
  background: white
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  display flex
  flex-direction column
  justify-content space-around
  align-items center
.info-first
  display flex
  align-items center
  justify-content space-between
  width: 76vw
  height: 4vh
  margin: 0 auto
  padding-top: 2vh
.info-sec
  width: 76vw
  height: auto
  line-height: 4vh
  font-size: 1rem
  display flex
  justify-content flex-start
  margin-left: -4vw
.info-third
  width: 76vw
  height:auto
  display flex
  justify-content flex-start
.info-button
  width: 76vw
  height:auto
  display flex
  justify-content flex-end

</style>
